<template>
    
    <el-container>
        <!--头部-->
        
        <el-header>
        <div >
            
            <!--标签--> 
            <el-scrollbar style="width: 90%; ">
                    <div  style="display: flex;">
                    <el-button  :type="Abutton_color"  @click="click_all()">全部</el-button>
                    <el-button   v-for="(item,key) in options" :key="key" @click="click_tag(item)" :type="item.btncolor" >{{ item.tagName }}</el-button>
                    </div>
            </el-scrollbar>
            
        </div>
        </el-header>
        <!---------------------------->
            <span style="font-size: 200%;margin-left:740px;">{{ one_tag }}</span>
            <hr>
        
                  
        <!--展示内容-->
        <el-main>
            <div v-if="nowButton" style="margin-left: 100px;">
                <el-button type="text" v-for="item in switch_p" :style="{color:item.Buttoncolor}" @click="click_switchp(item)">{{ item.name }}</el-button>

            </div>
            <div style="display: flex;flex-wrap: wrap;">
                
                <el-card v-for="item in cardData" style="width: 240px;margin-left: 100px;margin-top: 100px;">
                    <img referrer="no-referrer|origin|unsafe-url" referrerPolicy="no-referrer"  :src="item.img" width="200px" />
                    <a  referrer="no-referrer|origin|unsafe-url" referrerPolicy="no-referrer"  :href="item.url" style="color: blue;" target="_blank" >前往学习~~~~~</a>   
                    <br> 
                    
                    {{ item.name }}
                </el-card>
            </div>
        </el-main>
        <!---------------------------->
        <!--尾部-->
        <el-footer>
            <div class="block">
                    <!--必须加上.sync才能双向绑定!!!!!!-->
                <el-pagination
                    
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="currentPage"   
                    :total="count">
                </el-pagination>
            </div>
        </el-footer>
        <el-backtop target=".block"></el-backtop>
    </el-container>
   
    
    

</template>

<script>
import axios from 'axios';



    export default{
        
        created(){
            this.get_tags();
            this.click_switchp(this.nowButton);
        },
        data(){
            return{
                
                cardData:[],//存储所有数据
                options:[],//存储所有标签
                one_tag:'全部',//存储点击的标签(默认全部课程)    
                switch_p:[//存储以下name
                    {name:'全部资源'},
                    {name:'在线资源'},
                    {name:'用户资源'},
                ],
                nowButton:{//用的now,其实表示历史点击的是全部or正在审核or已经审核
                    name:'全部资源',
                },
                count:10,//默认总的页数为
                pagenum:'1',//当前页数 默认页数为1
                pagesum:'10',//每页展示数量，默认为10
                currentPage:1,
                Abutton_color:'primary'
               
            };
        },
        methods:{
            get_tags(){//获取所有标签
                axios.get("http://localhost:9090/get_tags").then(res=>{
                    //console.log(res.data)
                    this.options=res.data;
                   //console.log(this.options)
                })
            },
            click_all(){//点击了标签页里的全部
               this.handchangecolor();
               this.one_tag='全部'
               this.Abutton_color='success'
               
               this.get_resource_Bypage();
               this.currentPage=1
            
            },
            click_tag(item){//点击某一个标签
               this.handchangecolor(); 
               item.btncolor='success'
               this.one_tag=item.tagName//标签名
               this.currentPage=1;//将点亮的页数设为第一页
               this.pagenum=1//将页数设为第一页
               this.get_resource_Bypage();
             
            },
            handleSizeChange(val){
                // console.log("一页展示数量")
              
                this.pagesum=val;
                this.get_resource_Bypage();
            },
            handleCurrentChange(val){
                console.log("当前页");
                console.log(val)
                this.pagenum=val;
                console.log(this.nowButton.name)
                if(this.nowButton.name=='全部资源'){
                    this.get_resource_Bypage();
                }
                else if(this.nowButton.name=='在线资源'){
                    this.get_spider_Bypage();
                }
                
               
                
            },

            click_switchp(item){//点击的是当前标签下的全部or正在审核or已经审核
          
                this.nowButton.Buttoncolor='black'//点击当前按钮前，把历史按钮颜色改为黑色
                item.Buttoncolor='green'//当前按钮颜色设为绿色
                
                this.nowButton=item;
                if(item.name=='全部资源'){
                    axios.get("http://localhost:9090/get_resource_count").then(res=>{
                        //console.log("总数量:")
                        //console.log(res.data)
                        this.count=res.data
                        
                    })
                    //异步请求
                    this.get_resource_Bypage();
                }
                else if(item.name=='在线资源'){
                    //alert("在线资源")
                    axios.put("http://localhost:9090/get_spider_resource",{
                        pagenum:this.pagenum,
                        pagesum:this.pagesum,
                        tag_name:this.one_tag,
                    }).then(res=>{
                        this.cardData=res.data          
                    })
                    axios.get("http://localhost:9090/get_spider_resource_count").then(res=>{
                        //console.log("总数量:")
                        //console.log(res.data)
                        this.count=res.data
                        
                    })
                    
                }
                else if(item.name=='用户资源'){
                    //alert("用户资源")
                    axios.put("http://localhost:9090/get_user_resource",{
                        pagenum:this.pagenum,
                        pagesum:this.pagesum,
                        tag_name:this.one_tag,
                    }).then(res=>{
                        this.cardData=res.data
                      
                    })
                    axios.get("http://localhost:9090/get_user_resource_count").then(res=>{
                        //console.log("总数量:")
                        //console.log(res.data)
                        this.count=res.data
                        
                    })
                }

            },

            get_resource_Bypage(){//共用方法，获取标签对应的数据
                
                axios.put("http://localhost:9090/get_resource",{
                        pagenum:this.pagenum,
                        pagesum:this.pagesum,
                        tag_name:this.one_tag,
                    }).then(res=>{
                        this.cardData=res.data
                      
                    })
                axios.put("http://localhost:9090/get_resource_count_Bytagname",{
                        tag_name:this.one_tag,
                    }).then(res=>{
                        this.count=res.data
                    
                    })          
            },
            get_spider_Bypage(){
                axios.put("http://localhost:9090/get_spider_resource",{
                        pagenum:this.pagenum,
                        pagesum:this.pagesum,
                        tag_name:this.one_tag,
                    }).then(res=>{
                        this.cardData=res.data
                      
                    })
            },
            
            handchangecolor(){//对标签按钮渲染
                for(let i in this.options){//每次点击标签对其进行渲染
                    this.options[i].btncolor="primary"
                    this.Abutton_color="primary"
               }   
            },
          
        }
    }

</script>

<style>

.scrollbar-flex-content {
    height: 100%;

    display: flex;
  
  
}


</style>
